<template>
  <div class="monitor">
    <!-- 搜索 -->
    <search :key="levelType" :level-type="levelType" @search="search"></search>

    <!-- tabs数据 -->
    <div class="level-content">
      <cardToList @changePage="changePage" :queryPermission="{type:levelType,per:[165,167,168,169,170]}" :searchFrom="searchFrom" :tabs="tabs" :card-data="cardData" :total="total" :level-type="levelType" :checkStatus="true" @tabClick="tabClick" @jumpList="jumpList"></cardToList>
    </div>
  </div>
</template>

<script>
import search from '@/components/search/levelSearch'
import cardToList from '@/components/cardToList/index'
import { getStorage, setStorage } from '@/config/utils'
import { queryQueryTarget } from '@/api/target'

export default {
  name: 'monitor',
  components: {
    search,
    cardToList
  },
  data() {
    return {
      searchFrom: {
        name: '',
        dutyPart: '',
        year: '',
        rectificationRangeId: 0,
        pageIndex: 1,
        pageSize: 10
      },
      tabs: [],
      // 层级：学校层，专业层，课程层，教师层，学生层
      levelType: '',
      cardData: [],
      total: 0
    }
  },
  created() {
    // 年度默认为当前年份
    this.searchFrom.year = new Date().getFullYear()
    this.levelType = this.$route.params.type
    this.setTabsByType()
  },
  methods: {
    // 根据菜单上的层级查询对应的适用范围
    setTabsByType() {
      const list = getStorage('rangeList')
      if (list && list.length) {
        const temp = list.filter(item => item.code === this.levelType)
        if (temp.length) {
          this.tabs = temp[0].rectificationRangeDTOList

          // 默认显示第一个tabs页的数据
          this.searchFrom.rectificationRangeId = this.tabs[0].id
          this.getList()
        }
      }
    },
    // 获取列表
    getList() {
      queryQueryTarget(this.searchFrom)
        .then(res => {
          this.cardData = res.dataList
          this.total = res.total
        })
        .catch()
    },
    // 查询
    search(searchFrom) {
      this.searchFrom.rectificationObjectName = searchFrom.rectificationObjectName
      this.searchFrom.dutyPart = searchFrom.dutyPart
      this.searchFrom.year = searchFrom.year
      this.getList()
    },
    // 跳转进入列表页
    jumpList(id, card) {
      setStorage('monitorData', card)
      this.$router.push({
        path: `/improve/monitor/levelList/${this.levelType}`,
        query: {
          id: id
        }
      })
    },
    // 切换tabs
    tabClick(id) {
      this.searchFrom.rectificationRangeId = +id
      this.getList()
    },
    changePage(val) {
      this.searchFrom.pageIndex = val
      this.getList()
    }
  },
  watch: {
    $route(to, from) {
      this.levelType = to.params.type
      this.setTabsByType()
    }
  }
}
</script>

<style scoped>
</style>
